<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图找房 - 吉象出海</title>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        :root {
            --primary: #EAA82A;  /* 大象黄 - 品牌主色 */
            --secondary: #2E8B57; /* 森林绿 - 辅助色 */
            --danger: #D0021B;   /* 警示红 */
            --text: #374151;    /* 主要文字色 */
            --light-bg: #F8F9FA; /* 浅灰背景 */
            --card-shadow: 0 2px 12px rgba(0,0,0,0.06);
            --thai-orange: #F4A261; /* 泰国特色橙色 */
            --thai-blue: #2A9D8F;   /* 泰国特色蓝色 */
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
         /* 全局链接样式 */
        a {
            color: inherit;
            text-decoration: none;
        }
        
      
    
        body {
            background-color: #fff;
            color: var(--text);
            max-width: 428px;
            margin: 0 auto;
            overflow: hidden;
            height: 100vh;
        }
        
        /* 顶部品牌区 - 泰国风格 */
        .brand-header {
            text-align: center;
            padding: 15px 0;
            background: linear-gradient(to right, var(--thai-orange), var(--primary));
            position: relative;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .brand-title {
            font-size: 24px;
            font-weight: 700;
            color: white;
            margin-bottom: 4px;
            letter-spacing: 1px;
        }
        
        .brand-subtitle {
            font-size: 14px;
            color: rgba(255,255,255,0.9);
            letter-spacing: 2px;
        }
        
        .thai-icon {
            position: absolute;
            left: 20px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 24px;
            color: white;
        }
        
        /* 搜索区域 */
        .search-section {
            padding: 15px;
            background: white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        
        .search-container {
            display: flex;
            background: var(--light-bg);
            border-radius: 30px;
            overflow: hidden;
            padding: 8px 15px;
        }
        
        .search-container input {
            flex: 1;
            border: none;
            background: transparent;
            padding: 8px;
            font-size: 16px;
            outline: none;
        }
        
        .search-container button {
            background: var(--thai-orange);
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 20px;
            font-weight: 600;
            cursor: pointer;
        }
        
        /* 地图容器 */
        .map-container {
            height: 65vh;
            position: relative;
        }
        
        #map {
            height: 100%;
            width: 100%;
            z-index: 100;
        }
        
        /* 地图控制面板 */
        .map-controls {
            position: absolute;
            top: 15px;
            right: 15px;
            z-index: 500;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .map-btn {
            width: 45px;
            height: 45px;
            background: white;
            border-radius: 50%;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 20px;
            cursor: pointer;
            color: var(--thai-blue);
        }
        
        /* 筛选控制区 */
        .filter-section {
            padding: 15px;
            background: white;
            border-bottom: 1px solid #e5e7eb;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            z-index: 500;
            position: relative;
        }
        
        .filter-row {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
        }
        
        .filter-select {
            flex: 1;
            padding: 12px 15px;
            background: var(--light-bg);
            border-radius: 25px;
            border: 1px solid #e5e7eb;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .filter-tags {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 5px;
        }
        
        .filter-tag {
            background: var(--light-bg);
            color: var(--text);
            padding: 8px 15px;
            border-radius: 20px;
            font-size: 13px;
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 6px;
        }
        
        .filter-tag.active {
            background: var(--thai-blue);
            color: white;
        }
        
        /* 房源信息面板 */
        .property-panel {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            border-top-left-radius: 20px;
            border-top-right-radius: 20px;
            box-shadow: 0 -2px 15px rgba(0,0,0,0.1);
            z-index: 400;
            transform: translateY(calc(100% - 60px));
            transition: transform 0.3s ease;
            max-height: 70vh;
            overflow: hidden;
        }
        
        .property-panel.expanded {
            transform: translateY(0);
        }
        
        .panel-header {
            padding: 15px;
            text-align: center;
            border-bottom: 1px solid #f0f0f0;
            position: relative;
            cursor: pointer;
            background: linear-gradient(to right, var(--thai-blue), var(--secondary));
            color: white;
        }
        
        .drag-handle {
            width: 50px;
            height: 4px;
            background: rgba(255,255,255,0.7);
            border-radius: 2px;
            margin: 0 auto 10px;
        }
        
        .panel-title {
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 4px;
        }
        
        .panel-subtitle {
            font-size: 13px;
            opacity: 0.9;
        }
        
        .property-list {
            padding: 15px;
            max-height: 55vh;
            overflow-y: auto;
        }
        
        .property-card {
            background: white;
            border-radius: 15px;
            box-shadow: var(--card-shadow);
            margin-bottom: 15px;
            overflow: hidden;
            border: 1px solid #eaeaea;
            transition: all 0.3s;
        }
        
        .property-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .property-header {
            display: flex;
            padding: 15px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .property-image {
            width: 100px;
            height: 100px;
            background: #E5E7EB;
            border-radius: 10px;
            margin-right: 15px;
            overflow: hidden;
            position: relative;
        }
        
        .property-image::after {
            content: "泰国房源";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.6);
            color: white;
            padding: 3px;
            font-size: 11px;
            text-align: center;
        }
        
        .property-info {
            flex: 1;
        }
        
        .property-title {
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--thai-blue);
        }
        
        .property-price {
            color: var(--danger);
            font-weight: 700;
            font-size: 18px;
            margin-bottom: 8px;
        }
        
        .property-location {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #6B7280;
            margin-bottom: 5px;
        }
        
        .property-location i {
            margin-right: 6px;
            color: var(--thai-orange);
        }
        
        .property-distance {
            font-size: 12px;
            color: var(--secondary);
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .property-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            padding: 12px 15px;
            background: var(--light-bg);
        }
        
        .property-tag {
            background: rgba(234, 168, 42, 0.15);
            color: var(--text);
            padding: 5px 12px;
            border-radius: 15px;
            font-size: 12px;
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .tag-icon {
            color: var(--thai-orange);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            background: white;
            box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
            max-width: 428px;
            margin: 0 auto;
            z-index: 1000;
            padding: 5px 0;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            font-size: 12px;
            color: #9CA3AF;
            transition: all 0.3s;
        }
        
        .nav-item.active {
            color: var(--thai-blue);
        }
        
        .nav-icon {
            font-size: 22px;
            margin-bottom: 4px;
        }
        
        /* 泰国特色标记 */
        .thai-marker {
            background: var(--thai-orange);
            width: 32px;
            height: 32px;
            border-radius: 50% 50% 50% 0;
            transform: rotate(-45deg);
            position: relative;
            box-shadow: 0 0 12px rgba(0,0,0,0.3);
            border: 2px solid white;
        }
        
        .thai-marker::after {
            content: "";
            position: absolute;
            width: 22px;
            height: 22px;
            background: var(--thai-blue);
            border-radius: 50%;
            top: 5px;
            left: 5px;
        }
        
        /* 区域热力图例 */
        .legend {
            position: absolute;
            bottom: 100px;
            left: 15px;
            background: rgba(255, 255, 255, 0.9);
            padding: 12px;
            border-radius: 10px;
            z-index: 400;
            box-shadow: 0 3px 10px rgba(0,0,0,0.15);
            font-size: 13px;
            width: 160px;
        }
        
        .legend-title {
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--thai-blue);
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 6px;
        }
        
        .legend-color {
            width: 18px;
            height: 18px;
            margin-right: 10px;
            border-radius: 3px;
        }
        
        .zone-high { background: #e63946; }
        .zone-medium { background: #f4a261; }
        .zone-low { background: #2a9d8f; }
        
        /* 泰国特色加载动画 */
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255,255,255,0.9);
            z-index: 10000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            transition: opacity 0.5s;
        }
        
        .elephant-loader {
            font-size: 50px;
            margin-bottom: 20px;
            color: var(--thai-orange);
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        
        .loading-text {
            font-size: 18px;
            font-weight: 600;
            color: var(--thai-blue);
        }
        
        /* 响应式调整 */
        @media (max-width: 380px) {
            .filter-tag {
                padding: 6px 12px;
                font-size: 12px;
            }
            
            .property-image {
                width: 85px;
                height: 85px;
            }
        }
    </style>
</head>
<body>
    <!-- 加载动画
    <div class="loading-overlay" id="loading">
        <div class="elephant-loader">🐘</div>
        <div class="loading-text">正在加载泰国房产数据...</div>
    </div> -->
    
    <!-- 顶部品牌区域 -->
    <header class="brand-header">
     <a href="home.html" class="back-button" style="position: absolute; left: 15px; top: 15px; font-size: 20px; color: var(--text);">
        <i class="fas fa-arrow-left"></i>
    </a>
        <div class="brand-title">吉象出海</div>
        <div class="brand-subtitle">泰国专业房产服务平台</div>
    </header>
    
    <!-- 搜索区域 -->
    <section class="search-section">
        <div class="search-container">
            <input type="text" placeholder="搜索泰国房源、区域或项目">
            <button><i class="fas fa-search"></i> 搜索</button>
        </div>
    </section>
    
    <!-- 筛选控制区 -->
    <section class="filter-section">
        <div class="filter-row">
            <div class="filter-select">
                <span>曼谷</span>
                <span>▼</span>
            </div>
            <div class="filter-select">
                <span>公寓类型</span>
                <span>▼</span>
            </div>
        </div>
        
        <div class="filter-tags">
            <div class="filter-tag active">
                <i class="fas fa-map-marker-alt"></i> 所有区域
            </div>
            <div class="filter-tag">
                <i class="fas fa-bts"></i> 素坤逸
            </div>
            <div class="filter-tag">
                <i class="fas fa-city"></i> 是隆/沙吞
            </div>
            <div class="filter-tag">
                <i class="fas fa-umbrella-beach"></i> 芭提雅
            </div>
            <div class="filter-tag">
                <i class="fas fa-mountain"></i> 清迈
            </div>
            <div class="filter-tag">
                <i class="fas fa-water"></i> 普吉岛
            </div>
        </div>
    </section>
    
    <!-- 地图容器 -->
    <div class="map-container">
        <div id="map"></div>
        
        <!-- 地图控制面板 -->
        <div class="map-controls">
            <div class="map-btn" id="zoom-in">
                <i class="fas fa-plus"></i>
            </div>
            <div class="map-btn" id="zoom-out">
                <i class="fas fa-minus"></i>
            </div>
            <div class="map-btn" id="current-loc">
                <i class="fas fa-location-arrow"></i>
            </div>
            <div class="map-btn" id="filter-toggle">
                <i class="fas fa-filter"></i>
            </div>
        </div>
        
        <!-- 热力图例 -->
        <div class="legend">
            <div class="legend-title">
                <i class="fas fa-fire"></i> 区域房产热度
            </div>
            <div class="legend-item">
                <div class="legend-color zone-high"></div>
                <span>高热度区域</span>
            </div>
            <div class="legend-item">
                <div class="legend-color zone-medium"></div>
                <span>中热度区域</span>
            </div>
            <div class="legend-item">
                <div class="legend-color zone-low"></div>
                <span>低热度区域</span>
            </div>
        </div>
    </div>
    
    <!-- 房源信息面板 -->
    <div class="property-panel" id="property-panel">
        <div class="panel-header" id="panel-handle">
            <div class="drag-handle"></div>
            <div class="panel-title">曼谷精选房源</div>
            <div class="panel-subtitle">共15个精选房源，点击查看详情</div>
        </div>
        
        <div class="property-list">
            <!-- 房源卡片 1 -->
            <div class="property-card">
                <div class="property-header">
                    <div class="property-image"></div>
                    <div class="property-info">
                        <div class="property-title">The Residences at Mandarin Oriental</div>
                        <div class="property-price">฿12,500,000</div>
                        <div class="property-location">
                            <i class="fas fa-map-marker-alt"></i> 曼谷·湄南河畔
                        </div>
                        <div class="property-distance">
                            <i class="fas fa-walking"></i> BTS Saphan Taksin站 400米
                        </div>
                    </div>
                </div>
                <div class="property-tags">
                    <div class="property-tag">
                        <span class="tag-icon"><i class="fas fa-bed"></i></span>
                        2卧2卫
                    </div>
                    <div class="property-tag">
                        <span class="tag-icon"><i class="fas fa-ruler-combined"></i></span>
                        85㎡
                    </div>
                    <div class="property-tag">
                        <span class="tag-icon"><i class="fas fa-swimming-pool"></i></span>
                        河景泳池
                    </div>
                    <div class="property-tag">
                        <span class="tag-icon"><i class="fas fa-crown"></i></span>
                        豪华公寓
                    </div>
                </div>
            </div>
            
            <!-- 房源卡片 2 -->
            <div class="property-card">
                <div class="property-header">
                    <div class="property-image"></div>
                    <div class="property-info">
                        <div class="property-title">98 Wireless</div>
                        <div class="property-price">฿28,900,000</div>
                        <div class="property-location">
                            <i class="fas fa-map-marker-alt"></i> 曼谷·无线路
                        </div>
                        <div class="property-distance">
                            <i class="fas fa-subway"></i> BTS Phloen Chit站 250米
                        </div>
                    </div>
                </div>
                <div class="property-tags">
                    <div class="property-tag">
                        <span class="tag-icon"><i class="fas fa-bed"></i></span>
                        3卧3卫
                    </div>
                    <div class="property-tag">
                        <span class="tag-icon"><i class="fas fa-ruler-combined"></i></span>
                        145㎡
                    </div>
                    <div class="property-tag">
                        <span class="tag-icon"><i class="fas fa-tree"></i></span>
                        市中心绿洲
                    </div>
                    <div class="property-tag">
                        <span class="tag-icon"><i class="fas fa-star"></i></span>
                        超豪华公寓
                    </div>
                </div>
            </div>
            
            <!-- 房源卡片 3 -->
            <div class="property-card">
                <div class="property-header">
                    <div class="property-image"></div>
                    <div class="property-info">
                        <div class="property-title">Ideo Q Chula-Samyan</div>
                        <div class="property-price">฿3,200,000</div>
                        <div class="property-location">
                            <i class="fas fa-map-marker-alt"></i> 曼谷·Samyan
                        </div>
                        <div class="property-distance">
                            <i class="fas fa-subway"></i> MRT Samyan站 150米
                        </div>
                    </div>
                </div>
                <div class="property-tags">
                    <div class="property-tag">
                        <span class="tag-icon"><i class="fas fa-bed"></i></span>
                        1卧1卫
                    </div>
                    <div class="property-tag">
                        <span class="tag-icon"><i class="fas fa-ruler-combined"></i></span>
                        32㎡
                    </div>
                    <div class="property-tag">
                        <span class="tag-icon"><i class="fas fa-graduation-cap"></i></span>
                        近朱拉隆功大学
                    </div>
                    <div class="property-tag">
                        <span class="tag-icon"><i class="fas fa-tag"></i></span>
                        投资优选
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <nav class="bottom-nav">
       
	    <div class="nav-item">
            <a href="home.html" > <div class="nav-icon"><i class="fas fa-home"></i></div>
            <div>首页</div></a>
        </div>
        <div class="nav-item">
           <a href="message.html" > <div class="nav-icon"><i class="fas fa-search"></i></div>
            <div>消息</div></a>
        </div>
        <div class="nav-item active">
            <a href="postlist.html"> <div class="nav-icon"><i class="fas fa-map-marked-alt"></i></div>
            <div>发布</div></a>
        </div>
        <div class="nav-item">
          <a href="entrust.html">  <div class="nav-icon"><i class="fas fa-heart"></i></div>
            <div>委托</div></a>
        </div>
        <div class="nav-item">
           <a href="profile.html" >  <div class="nav-icon"><i class="fas fa-user"></i></div>
            <div>我的</div></a>
        </div>
    </nav>
    
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        // 模拟加载过程
        setTimeout(() => {
            document.getElementById('loading').style.opacity = '0';
            setTimeout(() => {
                document.getElementById('loading').style.display = 'none';
            }, 500);
        }, 1500);
        
        // 初始化地图 - 中心点为曼谷
        const map = L.map('map').setView([13.7563, 100.5018], 13);
        
        // 添加地图图层
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        
        // 添加泰国特色标记
        const markers = [
            {lat: 13.730, lng: 100.523, title: 'The Residences at Mandarin Oriental', type: 'luxury', price: '฿12.5M'},
            {lat: 13.743, lng: 100.547, title: '98 Wireless', type: 'super-luxury', price: '฿28.9M'},
            {lat: 13.732, lng: 100.532, title: 'Ideo Q Chula-Samyan', type: 'investment', price: '฿3.2M'},
            {lat: 13.725, lng: 100.535, title: 'Noble Ploenchit', type: 'luxury', price: '฿8.9M'},
            {lat: 13.748, lng: 100.538, title: 'The Lofts Yennakart', type: 'mid-range', price: '฿5.7M'},
            {lat: 13.755, lng: 100.567, title: 'The Line Sukhumvit 101', type: 'investment', price: '฿4.3M'},
            {lat: 13.764, lng: 100.541, title: 'Rhythm Sukhumvit 49', type: 'mid-range', price: '฿6.1M'},
            {lat: 13.722, lng: 100.513, title: 'Magnolias Waterfront Residences', type: 'super-luxury', price: '฿35.2M'}
        ];
        
        markers.forEach(marker => {
            // 创建泰国特色标记
            const thaiIcon = L.divIcon({
                className: 'thai-marker',
                html: '',
                iconSize: [32, 32],
                iconAnchor: [16, 32]
            });
            
            const m = L.marker([marker.lat, marker.lng], {icon: thaiIcon}).addTo(map);
            
            // 添加弹出信息
            m.bindPopup(`
                <div style="font-weight:700;margin-bottom:5px;color:${marker.type.includes('luxury') ? '#d62828' : '#2a9d8f'}">${marker.title}</div>
                <div style="margin-bottom:5px;font-weight:600;">${marker.price}</div>
                <div style="font-size:12px;margin-bottom:8px;">${marker.type === 'luxury' ? '豪华公寓' : marker.type === 'super-luxury' ? '超豪华公寓' : '投资型公寓'}</div>
                <div style="text-align:center;">
                    <button style="background:${marker.type.includes('luxury') ? '#e63946' : '#2a9d8f'};color:white;border:none;padding:5px 12px;border-radius:15px;cursor:pointer;">
                        查看详情
                    </button>
                </div>
            `);
        });
        
        // 添加区域热力图（模拟曼谷热门区域）
        const heatZones = [
            {lat: 13.730, lng: 100.523, radius: 1500, intensity: 0.9},  // 湄南河畔
            {lat: 13.743, lng: 100.547, radius: 1200, intensity: 0.85}, // 无线路
            {lat: 13.732, lng: 100.532, radius: 1800, intensity: 0.7},  // Samyan
            {lat: 13.755, lng: 100.567, radius: 2000, intensity: 0.6}   // Sukhumvit 101
        ];
        
        heatZones.forEach(zone => {
            const color = zone.intensity > 0.8 ? '#e63946' : 
                         zone.intensity > 0.6 ? '#f4a261' : '#2a9d8f';
            
            L.circle([zone.lat, zone.lng], {
                color: color,
                fillColor: color,
                fillOpacity: 0.2,
                radius: zone.radius
            }).addTo(map);
        });
        
        // 添加主要BTS/MRT线路（模拟）
        const btsLine = [
            [13.745, 100.534], [13.740, 100.539], [13.735, 100.544], 
            [13.730, 100.549], [13.725, 100.554], [13.720, 100.559]
        ];
        
        L.polyline(btsLine, {
                color: '#2a9d8f',
                weight: 4,
                opacity: 0.7,
                dashArray: '5, 10'
            }).addTo(map);
        
        const mrtLine = [
            [13.750, 100.524], [13.745, 100.529], [13.740, 100.534], 
            [13.735, 100.539], [13.730, 100.544], [13.725, 100.549]
        ];
        
        L.polyline(mrtLine, {
                color: '#e63946',
                weight: 4,
                opacity: 0.7,
                dashArray: '5, 10'
            }).addTo(map);
        
        // 地图控制功能
        document.getElementById('zoom-in').addEventListener('click', () => {
            map.zoomIn();
        });
        
        document.getElementById('zoom-out').addEventListener('click', () => {
            map.zoomOut();
        });
        
        document.getElementById('current-loc').addEventListener('click', () => {
            map.setView([13.7563, 100.5018], 13);
        });
        
        // 房源面板交互
        const propertyPanel = document.getElementById('property-panel');
        const panelHandle = document.getElementById('panel-handle');
        
        panelHandle.addEventListener('click', () => {
            propertyPanel.classList.toggle('expanded');
        });
        
        // 区域筛选
        document.querySelectorAll('.filter-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
                
                // 模拟区域切换效果
                propertyPanel.classList.remove('expanded');
                setTimeout(() => {
                    propertyPanel.classList.add('expanded');
                    // 添加加载效果
                    document.getElementById('loading').style.display = 'flex';
                    document.getElementById('loading').style.opacity = '1';
                    
                    setTimeout(() => {
                        document.getElementById('loading').style.opacity = '0';
                        setTimeout(() => {
                            document.getElementById('loading').style.display = 'none';
                        }, 500);
                    }, 800);
                }, 300);
            });
        });
        
        // 添加初始缩放动画
        setTimeout(() => {
            map.setView([13.7563, 100.5018], 13, {animate: true, duration: 1.5});
        }, 1800);
        
        // 添加地图移动结束事件
        map.on('moveend', function() {
            // 模拟加载新区域数据
            const center = map.getCenter();
            console.log(`加载新区域数据: ${center.lat}, ${center.lng}`);
        });
    </script>
</body>
</html>